<template>
  <div>
    <el-row style="width: 92%;margin: 20px auto">
      <el-button @click="showaddfood2 = true" plain>新增配菜</el-button>
    </el-row>
    <el-table :data="addfoodList" style="width: 92%;margin: 10px auto">
      <el-table-column prop="hash.name" label="名称">
      </el-table-column>
      <el-table-column prop="hash.amount" label="价格">
      </el-table-column>
      <el-table-column prop="hash.sort" label="排序">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="primary" @click="changeAddfood(scope.row)">修改</el-button>
          <el-button type="text" size="primary" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增配菜"
      :visible.sync="showaddfood2"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="配菜名称">
          <el-input v-model="addFoodname"></el-input>
        </el-form-item>
        <el-form-item label="配菜价格">
          <el-input v-model="addFoodprice"></el-input>
        </el-form-item>
        <el-form-item label="配菜排序">
          <el-input-number v-model="addFoodsort" style="width:100%" controlsPosition="right"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="配菜备注">
          <el-input v-model="addFoodremark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showaddfood = false">取 消</el-button>
        <el-button type="primary" @click="newAddfood">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改配菜"
      :visible.sync="reviseaddFood"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="配菜名称">
          <el-input v-model="addfoodList2.name"></el-input>
        </el-form-item>
        <el-form-item label="配菜价格">
          <el-input v-model="addfoodList2.amount"></el-input>
        </el-form-item>
        <el-form-item label="配菜排序">
          <el-input-number v-model="addfoodList2.sort" style="width:100%" controlsPosition="right"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="配菜备注">
          <el-input v-model="addfoodList2.remark"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseaddFood = false">取 消</el-button>
        <el-button type="primary" @click="saveReviseaddFood">修 改 </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      showaddfood2: false,
      reviseaddFood: false,
      ts: this.newStore(),
      addfoodList: [],
      addfoodList2: {},
      addFoodname: '',
      addFoodprice: '',
      addFoodremark: '',
      addFoodsort: '',
    };
  },
  created() {
    this.getAddfoodList();
  },
  methods: {
    saveReviseaddFood() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E9014218A1C0AF2325CED6E1547FF2F1AA855BBFF0B9210751F692',
        id: this.addfoodList2.id,
        name: this.addfoodList2.name,
        amount: this.addfoodList2.amount,
        sort: this.addfoodList2.sort,
        remark: this.addfoodList2.remark,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.$message({
          message: '修改成功！',
          type: 'success',
        });
        this.getAddfoodList();
        this.reviseaddFood = false;
      });
    },
    changeAddfood(item) {
      this.reviseaddFood = true;
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1A7FE60FEECEDC013',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.addfoodList2 = ts.d.data.operation1[0].hash;
      });
    },
    newAddfood() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E901424E95A8D2219E38CB0DD7585C3EE7FBD9',
        type: '2',
        name: this.addFoodname,
        amount: this.addFoodprice,
        sort: this.addFoodsort,
        remark: this.addFoodremark,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.showaddfood2 = false;
        this.$message({
          message: '添加成功！',
          type: 'success',
        });
        this.getAddfoodList();
      });
    },
    getAddfoodList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1CB4F8AD60F48093D',
        type: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.addfoodList = ts.d.data.operation1;
      });
    },
    deleteItem(item) {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142F568A6CE28C87E07F029BC8E3C0B8CF4',
        id: item.hash.id,
      };
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getAddfoodList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
